<template>
    <div class="shop-list">
        <div v-for="(i,index) in spList" :key="index" class="card"  @click="toDetail(i)">
            <div style="height: 100px;line-height: 100px;text-align: center">{{i.name}}</div>
            <div style="height: 70px;line-height: 70px;text-align: center">{{i.price}}</div>
            <div style="height: 30px;line-height: 30px;text-align: center">
                <button @click="add(i)">加购物车</button>
                <span>车内数量{{i.num||0}}</span>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'shopList',
        data(){
            return {

            }
        },
        methods:{
            //carList
            add(val){
                this.$store.dispatch('payCar/add',val)

            },
            toDetail(val){
                this.$router.push({
                    name:'shopDetail',
                    params:val
                })
            }
        },
        computed:{
            spList(){
                let spList=this.$store.state.payCar.spList
                let carList=this.$store.state.payCar.carList

                for(let i = 0;i < spList.length;i++){
                    for(let j = 0;j < carList.length;j++){
                        if(carList[j].name === spList[i].name){
                            spList[i].num = carList[j].num
                        }
                    }
                }
                return spList
            },


        },

        mounted(){
            console.log(
                this.$route
            )
        }
    }
</script>

<style>
    .shop-list{
        font-size: 18px;
        border: orange 3px solid;
        margin: 20px;
    }
    .shop-list .card{
        width: 143px;
        display: inline-block;
        margin: 20px;
        height: 200px;
        border: 1px #333 solid;
        border-radius: 8px;
        box-shadow: #aaa 3px 3px 3px;
    }


</style>
